<template>
  <a-modal
      :visible="props.visible"
      :destroyOnClose="true"
      :width="props.width"
      :title="props.title"
      @cancel="onClose"
      wrapClassName="custom-modal"
  >
    <template #footer>
      <a-button type="primary" danger @click="onClose">取消</a-button>
      <a-button type="primary" @click="onConfirm">确定</a-button>
    </template>
    <!-- 弹框内容 -->
    <div :style="{ height: props.height + 'px' }" style="overflow-y: auto;overflow-x: initial;">
      <slot name="content"></slot>
    </div>
  </a-modal>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: false,
    default: '标题'
  },
  visible: {
    type: Boolean,
    required: false,
    default: '标题'
  },
  width: {
    type: Number,
    default: 650
  },
  height: {
    type: Number,
    default: 250
  }
})
//注册事件
const emit = defineEmits(['onClose', 'onConfirm'])

//关闭弹框的事件
const onClose = () => {
  emit('onClose')
}

//弹框确定事件
const onConfirm = () => {
  emit('onConfirm')
}
</script>

<style scoped lang="scss">

:global(.ant-modal-header){
  padding: 14px 24px !important;
  border-top-left-radius: 7px !important;
  border-top-right-radius: 7px !important;
  background: #1890ff !important;
  .ant-modal-title {
    color: #fff !important;
  }
}

:global(.custom-modal .ant-modal-content) {
  border-top-left-radius: 7px !important;
  border-top-right-radius: 7px !important;

}
</style>
